<template>
  <div>
    <el-popover placement="right" :width="250" trigger="click" @show="loadData" v-if="count > 0">
      <template #reference>
          <el-icon :size="16" style="font-size:16px">
            <ele-Document/>
          </el-icon>
      </template>
      <el-table :data="attachments">
        <el-table-column
          width="350"
          prop="yswjm"
          :label="$t('item.fileName')"
        >
        <template #header><vp-label zh="文件名" en="File Name"/></template>
        <template #default="scope">
              <span v-html="scope.row.yswjm+'.'+scope.row.hzm" style="cursor:pointer" @click="handleFileClick(scope.row)"/>
              <el-progress type="circle" width="60" :percentage="scope.row.progress"  v-if="scope.row.showRow" />
            </template>
        </el-table-column>
      </el-table>
    </el-popover>
  </div>
</template>

<script setup lang="ts" name="vpFilePopover">
import { ElMessage } from 'element-plus';
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import request from '/@/utils/request';

const props = withDefaults(defineProps<{
        ywid?: string,
        disableDownload?: number,
        count?: number,
        ywids?:[],
    }>(), {
       count: 0
    })

    const attachments = ref([]);
    const loading = ref(false);

    const router = useRouter();
      const loadData = ()=>{
          loading.value = true;
          if(props.ywid){
            request.get('/file/'+props.ywid).then(res => {
              attachments.value = res?.data || []
          }).finally(()=>{
              loading.value = false;
          })
          }else if(props.ywids){
            request.get('/file/list',
            {
              params: {
                mainids : props.ywids
              }
            }).then(res => {
                attachments.value = res?.data || []
            }).finally(()=>{
                loading.value = false;
            })
          }
      }

      const handleFileClick = (attachment: any) => {
        let viewType = '';
        if (attachment.hzm == 'PNG' || attachment.hzm == 'JPG' || attachment.hzm == 'BMP') {
          viewType="IMAGE"
        } else if (attachment.hzm == 'PDF') {
          viewType="PDF"
        } else if(attachment.hzm == "MP4"){
          viewType="VIDEO"
        } else if(attachment.hzm == "MP3"){
          viewType="AUDIO"
        }
        if(viewType !== ""){
          const {href} = router.resolve({
            name:"fileView",
            params: {
              id: attachment.id,
              type: viewType,
              disableDownload: props.disableDownload
            }
          })
          window.open(href, '_blank');
        }else{
          if (props.disableDownload === 1) {
                ElMessage.error("无权下载");
            } else {
                downloadAttachment(attachment);
            }
        }

		};

		const downloadAttachment = (attachment: any) => {
      if(attachment.showRow){
            return;
        }
        attachment.showRow = true;
        const fileUrl = `/api/file/download/${attachment.id}`;
        const link = document.createElement('a');
        link.href = fileUrl;
        link.setAttribute('download', attachment.wbwjm + (attachment.hzm? '.' + attachment.hzm : ''));
        link.click();
		};

</script>